@charset "UTF-8";

@import "_reset";

@function r($px){
    @return ($px/40) * 1rem;
}

@function half($px){
    @return ($px/2) * 1px;
}



.navbar-default{
    
    border: none;
    background-color: #222222;
    
}
//导航栏的a标签颜色
.navbar-default .navbar-nav > li > a{
    color: #858585;
}
//导航激活类的颜色

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus{
    background-color: #080808;
    color: white;
}
//logo的位置.
.navbar-brand{
    padding-top: 0;
    padding-bottom:0 ;
    line-height: 50px;
    img{
        display: inline-block;
    }
}
.navbar{
    margin-bottom: -1px;
}
.row{
   margin-left: 0;
   margin-right: 0; 
}
section{
    .mnue{
        border-bottom: 1px solid red;
    padding-bottom: 40px;
    background-color: #fbfaf7;
    width: 100%;
    }
    
    
    .flash-bg{
        background:url(../images/phone.jpg) no-repeat right;
        background-position: 100% 100%;
        padding: 60px 0;
        
    }
.container{
   .row{
     
       .bg-img{
         
       }
   }
   .row{
       margin-top: 30px;

       .bit-title{
           
           
           color:  #0078d7 ;
           margin-top: r(106);
           font-weight: bolder;
           font-size: 3em;
           padding-bottom: 9px;
           margin: 40px 0 20px;

       }
       .small-title{
          margin-bottom: -6px; 
          font-size: 2.28em;
       }
       .row{
           
           .banner-img{
              text-align: center;
              width: 64px;
              height: 64px;
//            margin-left: 19px;
              padding-left: 5px;
                  

           }
           .banner-title{
               
               h4{
                   margin-bottom: 10px;
               }
           }
       }
   } 
}
}
//480以下的小屏幕
@media screen and (max-width:480px){
  section{
      .flash-bg{
          background: none;
          padding: 0;
      }
  .container{
   .row{
       margin-top: 0;
       .row{
           margin-top: 25px;
       }
       .bit-title{
           width: 100%;
           font-size: 24px;
           text-align: center;
          

       }
        .small-title{
           
          font-size: 20px;
          }
   } 
}
}
}
//480到768之间的屏幕
@media screen and (min-width:480px) and (max-width:768px){
    section{
        .flash-bg{
          background: none;
          padding: 0;
      }
  .container{
   .row{
       margin-top: 40px;
       
          .row{
             
             
          }
}
}
}
}
//768到992之间的屏幕
@media screen and (min-width:768px) and (max-width:992px){
    section{
     .container{
         .row{
             
       
}
}
}
}
section{
    width: 100%;
    .layabox{
    background-color: #FFFFFF;
    padding-top: 89px;
    padding-bottom: 89px;
    .row{
        .layaleft{
            
        
          .layabox-img{
//      margin-left: 20px;
        padding-top: 100px;
        text-align: center;
        }
    }
    .layaright{
        
    
    .layabox-title{
        font-size: 50px;
        font-weight: bolder;
        color: #8fc31f;
        margin-top: 20px;
        margin-bottom: 10px;
        line-height: 100px;
    }
    ul{
        li{
            padding-top: 10px;
            padding-bottom: 10px;
            line-height: 50px;
            margin-left: 5px;
            color: #959595;
            .layabox-biao{
                margin-right: 5px;
            }
        }
    }
    }
    }
    
    }
}
@media screen and (max-width:480px){
    section{
        .layabox{
            .row{
              .layaleft{
                  .layabox-img{
                      padding-top: 0;
                      text-align: center;
                  }
              }
              .layaright{
                  .layabox-title{
                      text-align: center;
                      font-size: 20px;
                  }
              }  
            }
        }
    }
}
@media screen and (min-width:480px) and (max-width:768px){
    section{
        .layabox{
            .row{
              .layaleft{
                  .layabox-img{
                      padding-top: 0;
                  }
              }
              .layaright{
                  .layabox-title{
                      font-size: 30px;
                  }
              }  
            }
        }
    }
}
.air{
    background: #0079D7;
    padding-top: 54px;
    padding-bottom: 102px;
    color: white;
    .container{
        .row{
          .air-title{
              font-size: 48px;
              text-align: center;
          } 
          .col-lg-6{
              height: 200px;
              margin-top: 50px;
              .air-img{
               height: 110px;   

              }
              .air-text{
                  margin-top: -30px;
                 h4{
                     font-size: 32px;
                     line-height: 64px;
                     
                 }
                 p{
                     font-size: 14px;
                     line-height: 24px;
                     
                 } 
              }
              
          }
        }
    }
}
@media screen and (max-width:480px) {
    .air{
        .container{
            .row{
                .col-xs-12{
                    .air-title{
                        font-size: 20px;
                    }
                }
                .col-lg-6{
                    .air-img{
                        text-align: center;
                        margin-top: 40px;
                    }
                     
            
        }
    }
}
}
}
@media screen and (min-width:480px) and(max-width:768px) {
    .air{
        .container{
            .row{
                .col-xs-12{
                    .air-title{
                        font-size: 22px;
                    }
                }
                .col-lg-6{
                    .air-img{
                        text-align: center;
                        margin-top: 60px;
            }
        }
    }
}
}
}
@media screen and (min-width:992px) {
    .air{
        .container{
            .row{
                .col-xs-12{
                    .air-title{
                        
                    }
                }
                .col-lg-6{
                    height: 130px;
                    .air-img{
                       
                       
                        
            }
        }
    }
}
}
}
.game{
    width: 100%;
        padding-top: 26px;
    padding-bottom: 54px;
    .container{
            
        .row{
            .game-title{
                h2{   
              font-size: 30px;
              text-align: left;
                }
              padding-bottom: 30px;  
            }
            .game-text{
                padding-top: 5px;
                text-align: right;
            }
            .game-img{
                text-align: center;
                img{
                    width: 352px;
                    height: 264px;
                }
            }
            .col-md-7{
                .row{
                    margin-top: 5px;
                  .col-md-2{
                      .game-content{
                          width: 100%;
                          height: 100%;
                           
                          img{
                              width: 72px;
                              height: 72px;
                              margin: 5px auto;
                             text-align: center;
                             display: block;
                             
                          }
                          p{
                              margin: 5px auto;
                             text-align: center;
                             width: 70px;
                             
                          }
                      }
                  }  
                }
            }
        }
    }
}
@media screen and (max-width:768px) {
    .game{
        .container{
            .row{
                .game-title{
                    h2{
                    font-size: 20px;
                    padding: 10px;
                    }
                }
                .game-img{
                    img{
                    width: r(600);
                    height: r(520);
                    }
                }
            }
        }
    }
}
@media screen and (min-width:768px) and (max-width:992px){
    .game{
        .container{
            .row{
                .game-img{
                          margin-top: 10px;
                      }
              .col-md-7{
                  .row{
                      
                      .col-md-2{
                          .game-content{
                              img{
                                  width: 60px;
                                  height: 60px;
                              }
                          }
                      }
                  }
              }
            }
        }
    }
}
@media screen and (min-width:992px){
    .game{
        .container{
            .row{
              .game-img{
                  
                  img{
                      width: 410px;
                      height: 210px;
                      
                  }
              }  
            }
        }
    }
}
.cooperation{
    width: 100%;
    background: #f4f4f4;
    .container{
        .row{
            .col-md-12{
                margin-top: 20px;
                font-size: 30px;
                p{
                    span{
                        font-size: 12px;
                    }
                }
            }
            .coo-zong{
               margin-top: 20px; 
            
           .col-md-2{
               .cooperation-img{
                   margin-bottom: 20px;
                  
                   img{
                    height: auto;
                    display: block;
                    max-width: 100%;
                   
                   }
                  } 
               }
           } 
        }
    }
}
@media screen and (max-width: 480px){
    .cooperation{
       .container{
           .row{
             .coo-zong{
                 .col-md-2{
                     .cooperation-img{
                         img{
                             width: r(260);
                             height: r(100);
                         }
                     }
                 }
             }  
           }
       } 
    }
}
@media screen and (min-width: 480px) and (max-width:768px){
    .cooperation{
       .container{
           .row{
             .coo-zong{
                 .col-md-2{
                     .cooperation-img{
                         img{
                             width: r(260);
                             height: half(140);
                         }
                     }
                 }
             }  
           }
       } 
    }
}
@media screen and (min-width: 992px){
    .cooperation{
       .container{
           .row{
             .coo-zong{
                 .col-md-2{
                     .cooperation-img{
                         img{
                             width: half(270);
                             height: half(140);
                         }
                     }
                 }
             }  
           }
       } 
    }
}
footer{
    background: #3b3b3b;
    
    .container{
        .row{
            margin-top: 35px;
            margin-bottom: 35px;
            .col-md-6{
                color: #A1A3AB;
                font-size: 12px;
                .contact{
                    ul{
                        li{
                            float: left;
                            margin-right: 10px;
                            a{
                                color: #A1A3AB;
                                line-height: 30px;
                            }
                        }
                    }
                }
            }
            .footer-contact{
                
            
           
              ul{
                  
                  li{
                      float: left;
                      margin-right: 10px;
                      position: relative;
                      width: 38px;
                      height: 38px;
                  .tu{
                      position: absolute;
                      
                      
                      left: -50px;
                      top: -150px;
                      display: none;
                      img{
                          height: 150px;
                          width: 142px;
                      }
                  }
              }
              li:hover .tu{
                  display: block;
              } 
           } 
        }
    }
    }
}
@media screen and (max-width:480px){
  footer{
      .container{
          .row{
              
                .footer-contact{
                    display: none;
                  
              }
          }
      }
  }  
}
@media screen and (min-width:480px) and (max-width:768px){
  footer{
      .container{
          .row{
              
                .footer-contact{
                    margin-bottom: 20px;
                    margin-top: 20px;
                  
              }
          }
      }
  }  
}
